<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>集群管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/templates' }">通用配置模板</el-breadcrumb-item>
            <el-breadcrumb-item>添加模板</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 表单输入区 -->
        <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="180px">
            <el-tabs type="card" v-model="selectedTabName">
                <el-tab-pane :name="tabNames[0]">
                    <span slot="label"><i class="el-icon-s-claim"></i> 基本设置</span>
                    
                    <div class="form-div">
                        <el-form-item label="模板名称" prop="name">
                            <el-input v-model="addForm.name" maxlength="30" show-word-limit></el-input>
                        </el-form-item>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="最大连接数" prop="max_connections">
                                    <el-input-number v-model="addForm.max_connections" controls-position="right" :min="10" :max="500"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="数据库监听端口" prop="db_port">
                                    <el-input-number v-model="addForm.db_port" controls-position="right" :min="1" :max="65536"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="数据库管理员用户" prop="db_user">
                                    <el-input v-model="addForm.db_user"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="数据库用户密码" prop="db_password">
                                    <el-input v-model="addForm.db_password" show-password></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="复制模式" prop="replication_mode">
                                    <el-select v-model="addForm.replication_mode" placeholder="请选择复制模式">
                                        <el-option label="sync" value="sync"></el-option>
                                        <el-option label="async" value="async"></el-option>
                                        <el-option label="quorum" value="quorum"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="兼容模式" prop="db_mode">
                                    <el-select v-model="addForm.db_mode" placeholder="请选择数据库兼容模式">
                                        <el-option label="oracle" value="oracle"></el-option>
                                        <el-option label="pg" value="pg"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="加密方式" prop="encryption">
                                    <el-select v-model="addForm.encryption" placeholder="请选择加密方式">
                                        <el-option label="md5" value="md5"></el-option>
                                        <el-option label="trust" value="trust"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="HA库名" prop="hamgr_dbname">
                                    <el-input v-model="addForm.hamgr_dbname" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="HA库用户" prop="hamgr_dbuser">
                                    <el-input v-model="addForm.hamgr_dbuser" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="ping命令路径" prop="ping_path">
                            <el-input v-model="addForm.ping_path"></el-input>
                        </el-form-item>
                    </div>

                </el-tab-pane>
                <el-tab-pane :name="tabNames[1]">
                    <span slot="label"><i class="el-icon-s-order"></i> 高级设置</span>
                    
                    <div class="form-div">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="备服务器WAL文件数" prop="wal_keep_segments">
                                    <el-input-number v-model="addForm.wal_keep_segments" controls-position="right" :min="8" :max="1024"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="进程最大数" prop="max_wal_senders">
                                    <el-input-number v-model="addForm.max_wal_senders" controls-position="right" :min="16" :max="256"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="热备反馈" prop="hot_standby_feedback">
                                    <el-select v-model="addForm.hot_standby_feedback" placeholder="请选择是否启用热备反馈">
                                        <el-option label="on" value="on"></el-option>
                                        <el-option label="off" value="off"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="编码格式" prop="server_encoding">
                                    <el-select v-model="addForm.server_encoding" placeholder="请选择数据库编码格式">
                                        <el-option label="default" value="default"></el-option>
                                        <el-option label="utf8" value="utf8"></el-option>
                                        <el-option label="gbk" value="gbk"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="虚拟IP地址" prop="virtual_ip">
                                    <el-input v-model="addForm.virtual_ip"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="虚拟子网掩码" prop="virtual_ip_mask">
                                    <el-input v-model="addForm.virtual_ip_mask"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="arping命令路径" prop="arping_path">
                            <el-input v-model="addForm.arping_path"></el-input>
                        </el-form-item>
                        <el-form-item label="ip命令路径" prop="ip_path">
                            <el-input v-model="addForm.ip_path"></el-input>
                        </el-form-item>
                        <el-form-item label="SSH 参数" prop="ssh_options">
                            <el-input v-model="addForm.ssh_options"></el-input>
                        </el-form-item>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="重连尝试次数" prop="reconnect_attempts">
                                    <el-input-number v-model="addForm.reconnect_attempts" controls-position="right" :min="2" :max="20"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="重连次数间隔" prop="reconnect_interval">
                                    <el-input-number v-model="addForm.reconnect_interval" controls-position="right" :min="1" :max="10"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="故障转移方式" prop="failover">
                                    <el-select v-model="addForm.failover" placeholder="请选择故障转移方式">
                                        <el-option label="manual" value="manual"></el-option>
                                        <el-option label="automatic" value="automatic"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="恢复方式" prop="recovery">
                                    <el-select v-model="addForm.recovery" placeholder="请选择恢复方式">
                                        <el-option label="manual" value="manual"></el-option>
                                        <el-option label="automatic" value="automatic"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                </el-tab-pane>
            </el-tabs>

            <div class="div-submit">
                <el-button icon="el-icon-minus" @click="cancel">返 回</el-button>
                <el-button icon="el-icon-close" @click="reset">重 置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="addTemplate">添 加</el-button>
            </div>
        </el-form>

    </div>
</template>

<script>
export default {
    data: function () {
        return {
            tabNames: ['tab-basic', 'tab-advance'],
            selectedTabName: 'tab-basic',
            addForm: {
                name: "",
                max_connections: 100,
                db_port: 5432,
                db_user: "dbadmin",
                db_password: "123456",
                replication_mode: "quorum",
                db_mode: "oracle",
                encryption: "md5",
                wal_keep_segments: 512,
                max_wal_senders: 32,
                hot_standby_feedback: "on",
                server_encoding: "default",
                hamgr_dbname: "repmgr",
                hamgr_dbuser: "repmgr",
                ping_path: "/usr/bin",
                virtual_ip: "",
                virtual_ip_mask: "",
                arping_path: "/sbin",
                ip_path: "/sbin",
                ssh_options: "-q -o ConnectTimeout=10 -o StrictHostKeyChecking=no",
                reconnect_attempts: 3,
                reconnect_interval: 5,
                failover: "automatic",
                recovery: "manual"
            },
            addFormRules: {
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },
                    { min: 5, max: 30, message: '用户名的长度在 5 ~ 30 个字符之间', trigger: 'blur' }
                ],
                max_connections: [
                    { required: true, message: '请输入最大连接数', trigger: 'blur' },
                    { type: 'number', message: '请输入正确的最大连接数', trigger: ['blur', 'change'] }
                ],
                db_port: [
                    { required: true, message: '请输入数据库监听端口号', trigger: 'blur' },
                    { type: 'number', message: '请输入正确的数据库监听端口号', trigger: ['blur', 'change'] }
                ],
                db_password: [
                    { required: true, message: '请输入管理员密码', trigger: 'blur' },
                    { min: 3, max: 15, message: '管理员密码的长度在 3 ~ 15 个字符之间', trigger: 'blur' }
                ],
                wal_keep_segments: [
                    { required: true, message: '请输入备用服务器保留的WAL文件数', trigger: 'blur' },
                    { type: 'number', message: '请输入正确的备用服务器保留的WAL文件数', trigger: ['blur', 'change'] }
                ],
                max_wal_senders: [
                    { required: true, message: '请输入WAL Sender进程最大数', trigger: 'blur' },
                    { type: 'number', message: '请输入正确WAL Sender进程最大数', trigger: ['blur', 'change'] }
                ],
            }
        }
    },
    methods: {
        cancel: function () {
            this.$router.push('/templates');
        },
        reset: function () {
            this.$refs.addFormRef.resetFields();
        },
        addTemplate: function () {
            console.log(this.addForm);

            this.$refs.addFormRef.validate(async valid => {
                if (!valid) {
                    if (this.addForm.name === '') {
                        this.selectedTabName = this.tabNames[0];
                        console.log("this.selectedTabName: ", this.selectedTabName);
                        return this.$message.warning(`请填写有效的模板名称！`);
                    }
                    return this.$message.warning(`模板信息校验失败，请检查模板信息有效性！`);
                }
                const result = await this.$http.post('templates', this.addForm);
                const res = result.data;
                console.log("res: ", res);

                if (res.meta.status !== 201) {
                    return this.$message.error(`添加模板失败: ${res.meta.msg}`);
                }
                this.$message.success(`添加模板成功`);
                this.cancel();
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .el-tabs {
        height: 540px;
        padding-right: 50px;
    }

    .el-tab-pane .form-div {
        width: 900px;
        height: 300px;
        margin: 10px auto;
    }

    .div-submit {
        display: flex;
        width: 100%;
        margin: 20px 0;
        justify-content: center;
    }

    .div-submit .el-button {
        margin: 10px 20px;
    }

    .el-select,
    .el-input-number {
        width: 100%;
    }
</style>
